<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    iframe {
      border: 0px;
      overflow: hidden;
    }
    ul {
      width: 90%;
    }
    li {
      word-wrap:break-word
    }
  </style>
</head>

<body>
  <h1>参考链接</h1>
  <ul>
    <li>https://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651498163&idx=1&sn=e9a7731fa03fc5758ef9cb477ffef555&chksm=80f1af7bb786266d4464b9372e7089eaf413438a29f00182bd3f26faed29b27d9616c07ab5a8&mpshare=1&scene=1&srcid=&sharer_sharetime=1579333341261&sharer_shareid=e1379a01e1a80c9f336a89dd50139469&key=b8a08d6a33aaec7d6eee5c40c517b4134c5254780f66e2187cc8344e8d7bff2fcd814f8735f1f66f1bc7aba4cd3fde79bb5c6fd2f73ed6f4cf69af21ccfd06e3d8cffdeebfcc3f7e52fa589d446e3931&ascene=14&uin=MTkyMDQ4ODkwNw%3D%3D&devicetype=Windows+10&version=62080079&lang=zh_CN&exportkey=AwoKW7r%2BLS6i%2BBvujEp8350%3D&pass_ticket=qv4fHteDOUdZA4BSdJHsyvVmXwElh2YzSWqtDSZ2UpDVdN%2Foo7wOPTtSY2wMFv0j</li>
  </ul>
  <h1>部分实现</h1>
  <div style="display: flex;flex-wrap: wrap;" id="iframeBody">
  </div>
</body>
<script>
  let iframeList = [{
    name: '节点交错闪烁动画',
    src: './Example1.html'
  }, {
    name: '翻牌器',
    src: '../翻牌器/code/原生/index.html',
    width: 500,
  }, {
    name: '文字-动画1',
    src: './Example2.html',
    width: 600,
  }, {
    name: '文字-动画2',
    src: './Example3.html',
    width: 400,
  }, {
    name: '文字-动画3',
    src: './Example9.html',
    width: 400,
  }, {
    name: '文字-动画4(文字阴影闪烁)',
    src: './Example10.html',
    width: 600,
  }, {
    name: '按钮-动画1',
    src: './Example4.html'
  }, {
    name: '列表-动画1',
    src: './Example5.html',
    width: 500,
    height: 400
  }, {
    name: '菜单-动画1',
    src: './Example6.html',
    width: 400,
    height: 400
  }, {
    name: '跳转-动画1',
    src: './Example7.html',
    width: 600,
    height: 400
  }, {
    name: '加载-动画1',
    src: './Example8.html',
    width: 400
  }, {
    name: '环状图-动画1',
    src: './Example12.html',
    width: 500
  }, {
    name: '毛玻璃-动画1',
    src: './Example13.html',
    width: 500
  }]
  const iframeListDomBody = document.createDocumentFragment();

  function getTemplate(item) {
    return `
      <div>
        <h3>${item.name}(${item.src})</h3>
        <iframe src="${item.src}" width="${item.width || 400}" height="${item.height || 300}"></iframe>
      </div>
    `
  }
  iframeList.forEach(item => {
    iframeListDomBody.appendChild(document.createRange().createContextualFragment(getTemplate(item)))
  })
  document.getElementById('iframeBody').appendChild(iframeListDomBody)
</script>
</html>